<template>
	<view class="userBalance">
		<view class="balance">
			<view class="header">
				<view class="left">
					<p>总资产(元)</p>
					<h3>4000.00</h3>
				</view>
				<view class="right" @click="toPayment">
					<span>充值</span>
				</view>
			</view>
			<view class="bottom">
				<view class="item">
					<p>累计充值(元)</p>
					<h3>4000.00</h3>
				</view>
				<view class="item">
					<p>累计消费(元)</p>
					<h3>0</h3>
				</view>
			</view>
		</view>
		<view class="fuwu-menu">
			<view class="item" @click="toUrl(1)">
				<image src="../../static/record1.png" mode=""></image>
				<p>账单记录</p>
			</view>
			<view class="item" @click="toUrl(2)">
				<image src="../../static/record2.png" mode=""></image>
				<p>消费记录</p>
			</view>
			<view class="item" @click="toUrl(3)">
				<image src="../../static/record3.png" mode=""></image>
				<p>充值记录</p>
			</view>
			<view class="item" @click="toUrl(4)">
				<image src="../../static/record4.png" mode=""></image>
				<p>积分中心</p>
			</view>
		</view>
		<view class="bace">
			<view class="item" @click="toCoupon">
				<view class="left">
					<p>领取优惠券</p>
					<p>满减享优惠</p>
				</view>
				<view class="right">
					<image src="../../static/money.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			toCoupon(){
				uni.navigateTo({
					url:"/pages/user/user-coupon"
				})
			},
			toPayment(){
				uni.navigateTo({
					url:"/pages/user/user-payment"
				})
			},
			toUrl(type){
				if(type==4){
					uni.navigateTo({
						url:"/pages/user/user-integral"
					})
				}else{
					uni.navigateTo({
						url:`/pages/user/user-bill?type=${type}`
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.userBalance{
	padding-top:20px;
	.bace{
		padding:10px;
		.item:nth-child(1){
			background-color:#fff6d1;
		}
		.item:nth-child(2){
			background-color:#fff3f3;
			margin-top:10px;
		}
		.item{
			width:95%;
			padding:10px;
			border-radius:10px;
			display:flex;
			align-items:center;
			justify-content:space-between;
			.left{
				line-height:30px;
				p{
					color:#ff0000;
				}
				p:nth-child(1){
					font-weight:bold;
				}
				p:nth-child(2){
					font-size:13px;
				}
			}
			image{
				width:60px;
				height:60px;
			}
		}
	}
	.fuwu-menu{
		display:flex;
		padding:10px;
		margin-top:10px;
		align-items:center;
		justify-content:space-between;
		border-bottom:1px solid #f0f0f0;
		.item{
			display:flex;
			align-items:center;
			flex-direction:column;
			image{
				width:60rpx;
				height:60rpx;
			}
			p{
				font-size:12px;
				margin-top:10px;
			}
		}
	}
	.balance{
		width: 358px;
		height: 171px;
		border-radius:10px;
		overflow:hidden;
		margin:0 auto;
		background-image: linear-gradient(to right, #f33b2b 0%, #f36053 100%);
		.bottom{
			display:flex;
			align-items:center;
			padding:20px;
			margin-top:-15px;
			justify-content:space-between;
			.item{
				color:#ffffff;
				h3{
					margin-top:10px;
				}
			}
		}
		.header{
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding:20px;
			.left{
				color:#ffffff;
				h3{
					margin-top:10px;
					font-size:20px;
				}
			}
			.right{
				width:80px;
				height:35px;
				border-radius:25px;
				text-align:center;
				line-height:35px;
				color:#ff0000;
				background-color:#ffffff;
			}
		}
	}
}

</style>
